<template>
  <div class="work_list_bom_tree_detail" v-loading="isLoading">
    <one-title title="明细表" @refreshData="refresh">
      <div class="mes_btn">
        <el-button type="success" @click="_edit" v-show="isShow">
          工艺路线编辑
        </el-button>
      </div>
    </one-title>
    <div class="table_container">
      <el-table
        border
        stripe
        :data="workorderTechProcTable"
        style="width: 100%"
        tooltip-effect="dark"
        align="center">
        <el-table-column
          prop="workorderNumber"
          label="工单编号"
          show-overflow-tooltip
          class="linkText"
          align="center">
        </el-table-column>
        <el-table-column
          prop="materialNumber"
          label="物料编码"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="drawingNumber"
          label="图号"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="工艺规程编号"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="工艺规程名称"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="version"
          label="工艺版本"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="typeId"
          label="工艺规程类型"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="technologist"
          label="工艺师"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="description"
          :resizable="false"
          label="工艺规程描述"
          show-overflow-tooltip
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="work_proceduce_table">
      <one-title title="工序表" style="font-size: 14px;">
        <div class="mes_btn" v-show="isShow">
          <el-button @click="showDialog('comMaterial')">工序上料清单</el-button>
          <el-button @click="showDialog('comResource')">工序资源清单</el-button>
        </div>
      </one-title>
      <div class="table_container">
        <el-table
          border
          stripe
          :data="workorderStageTable"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          align="center">
          <el-table-column
            width="40"
            type="selection"
            align="center">
          </el-table-column>
          <el-table-column
            prop="sort"
            label="工序序号"
            show-overflow-tooltip
            class="linkText"
            align="center">
          </el-table-column>
          <el-table-column
            prop="workstageNumber"
            label="工序编号"
            show-overflow-tooltip
            align="center">
          </el-table-column>
          <el-table-column
            prop="workstageName"
            label="工序名称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="workorderTecProcNumber"
            label="工艺规程编号"
            show-overflow-tooltip
            align="center">
          </el-table-column>
          <el-table-column
            prop="assignRule"
            label="派工规则"
            show-overflow-tooltip
            align="center">
          </el-table-column>
          <el-table-column
            prop="estimateEffort"
            label="定额工时"
            show-overflow-tooltip
            align="center">
            <template slot-scope="scope">
              <span>{{scope.row.estimateEffort ? scope.row.estimateEffort + 'h' : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="evaluator"
            label="估工人员"
            show-overflow-tooltip
            align="center">
          </el-table-column>
          <el-table-column
            prop="remarks"
            :resizable="false"
            label="工序描述"
            show-overflow-tooltip
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <work-order-material
      ref="comMaterial"
      :list="materialList">
    </work-order-material>
    <work-order-resource
      ref="comResource"
      :list="resourceList">
    </work-order-resource>
  </div>
</template>

<script>
import WorkOrderMaterial from './WorkOrderMaterial'
import WorkOrderResource from './WorkOrderResource'

export default {
  name: 'WorkListBomTreeDetail',
  data() {
    return {
      workorderid: undefined, // 选中的工单id
      isLoading: false,
      isShow: false,
      // 表格选中的数据
      selectData: [],
      // 上料清单弹窗是否显示
      dialogMaterialVisible: false,
      // 资源清单弹窗是否显示
      dialogResourceVisible: false,
      materialList: this.$store.state.workListBomTree.workOrderDetail.workorderWorkstageMaterialList, // 上料清单列表数据
      resourceList: this.$store.state.workListBomTree.workOrderDetail.workorderWorkstageResourceList // 资源清单列表数据
    }
  },
  components: {
    WorkOrderMaterial,
    WorkOrderResource
  },
  computed: {
    // 工单信息
    workorderTable() {
      return this.$store.state.workListBomTree.workOrderDetail.workorder
    },
    // 工艺信息
    workorderTechProcTable() {
      let workorderTechProc = this.$store.state.workListBomTree.workOrderDetail.workorderTechProc
      if (Object.keys(workorderTechProc).length !== 0) {
        return [workorderTechProc]
      } else {
        return []
      }
    },
    // 工序信息
    workorderStageTable() {
      return this.$store.state.workListBomTree.workOrderDetail.workorderWorkstageList
    },
    // 工序上料清单（弹窗）
    workOrderMaterial() {
      return this.$store.state.workListBomTree.workOrderDetail.workorderWorkstageMaterialList
    },
    // 工序资源清单（弹窗）
    workOrderResource() {
      return this.$store.state.workListBomTree.workOrderDetail.workorderWorkstageResourceList
    }
  },
  mounted() {
  },
  methods: {
    // 刷新方法
    refresh() {
      this.init()
    },
    // 初始化方法
    init() {
      this.isLoading = true
      // id为undefined 清空表格数据
      if (!this.workorderid) {
        this.$store.state.workListBomTree.workOrderDetail.workorderTechProc = {}
        this.$store.state.workListBomTree.workOrderDetail.workorderWorkstageList = []
        this.isShow = false
        this.isLoading = false
        return
      }
      let postData = {
        method: 'get',
        url: 'a/workorder/workorder/getworkorder/' + this.workorderid,
        module: 'workListBomTree',
        state: 'workOrderDetail'
      }
      this.$store.dispatch('saveData', postData).finally(() => {
        this.isLoading = false
        this.isShow = true
      })
    },
    // 获取bomTree选中的id
    setWorkorderid(workorderid) {
      this.workorderid = workorderid
      this.init()
    },
    // 复选框选中的数据
    handleSelectionChange(val) {
      this.selectData = val
      this.materialList = this.getMatchedWorkorderWorkstages(this.workOrderMaterial, val)
      this.resourceList = this.getMatchedWorkorderWorkstages(this.workOrderResource, val)
    },
    /**
     * 获取arr的workorderWorkstageId与value的id匹配的项组成新数组
     * @param arr
     * @param value
     * @returns {Array}
     */
    getMatchedWorkorderWorkstages(arr, value) {
      let matchedArr = []
      arr.forEach(v1 => {
        value.forEach(v2 => {
          if (v1.workorderWorkstageId === v2.id) {
            matchedArr.push(v1)
          }
        })
      })
      return matchedArr
    },
    // 未选数据点清单提示信息
    showDialog(com) {
      if (this.selectData.length > 0) {
        this.$refs[com].dialogTableVisible = true
      } else {
        this.$message.error({
          message: '未选中任何数据',
          duration: 1500,
          center: true
        })
      }
    },
    // 跳转到工艺编辑(携带工艺id)
    _edit() {
      this.$router.push({
        path: '/workSheetProcessDetail',
        query: {
          id: this.$store.state.workListBomTree.workOrderDetail.workorderTechProc.id,
          backUrl: '/workListBomTree'
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
  .work_list_bom_tree_detail {
    width: 100%;
    .table_container {
      margin: 20px 0;
    }
    .work_proceduce_table {
      border: 1px solid #ebeef5;
      margin: 0 20px;
      .title_wrapper {
        border-bottom: none;
        span.title_label[data-v-0a88dca2] {
          border-left: 5px solid transparent;
        }
        .icon-shuaxin:before {
          content: '';
        }
      }
      .table_container {
        margin-top: 0;
      }
    }
  }
</style>
<style lang="less">
  .work_proceduce_table {
    span.title_label {
      background-color: transparent !important;
      border: none !important;
      font-size: 14px !important;
      padding-left: 0 !important;
    }
    .icon-shuaxin:before {
      content: '' !important;
    }
  }
</style>
